<template>
  <div>
    <table3
    :selectList="selectList"
    :total="total"
    @select="select"
    @pageChange="pageChange">
      <tr>
        <th></th>
        <th>AAA</th>
      </tr>
      <tr v-for="o in tableData" :key="o.id">
        <td>
          <tableCheckbox :id="o.id"></tableCheckbox>
        </td>
        <td>
          <i>{{o.name}}</i>
        </td>
      </tr>
    </table3>
  </div>
</template>

<script>
import table3 from './table.vue'
import tableCheckbox from './table-select.vue'
export default {
  components: {
    table3,
    tableCheckbox
  },
  data () {
    return {
      selectList: [1, 2, 3],
      page: 1,
      tableData: [],
      tableData1:[
        {
          id: 1,
          name: 'haha'
        },
        {
          id: 2,
          name: 'hehe'
        },
        {
          id: 3,
          name: 'xixi'
        }
      ],
      tableData2: [
        {
          id: 12,
          name: 'lala'
        },
        {
          id: 13,
          name: 'baba'
        }
      ],
      total: 0
    }
  },
  mounted () {
    setTimeout(() => {
      this.tableData = this.tableData1
      this.total = 5
    }, 100)
  },
  methods: {
    select (checked) {
      console.log('select', checked)
      this.selectList = checked
    },
    pageChange (page) {
      setTimeout(() => {
        if (page === 1) {
          this.tableData = this.tableData1
        } else {
          this.tableData = this.tableData2
        }
        this.total = 5
      }, 100)
    }
  }
}
</script>
